<template>
  <div class="dashboard-editor">
    <panel-group
      :panel-data="{
        completeAmount,
        completeRatio,
        totalSaleAmount,
        unAmount,
        unCompleteRatio,
        text,
        projectCollectByYear,
        saleChanceByYear,
        marketActivityByYear,
        visitNumByYear
      }"
    />

    <el-row style="background:#fff; padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :x-axis="xAxis" :chart-data="lineChartData"/>
    </el-row>

    <!--
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>
    -->
  </div>
</template>

<script>
import {getDataApi} from '@/api/crm/home'
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
// import RaddarChart from './dashboard/RaddarChart'
// import PieChart from './dashboard/PieChart'
// import BarChart from './dashboard/BarChart'

// const lineChartData = {
//   newVisitis: {
//     expectedData: [100, 120, 161, 134, 105, 160, 165],
//     actualData: [120, 82, 91, 154, 162, 140, 145],
//     finalData: [120, 161, 134, 120, 82, 91, 105],
//   },
//   // messages: {
//   //   expectedData: [200, 192, 120, 144, 160, 130, 140],
//   //   actualData: [180, 160, 151, 106, 145, 150, 130]
//   // },
//   // purchases: {
//   //   expectedData: [80, 100, 121, 104, 105, 90, 100],
//   //   actualData: [120, 90, 100, 138, 142, 130, 130]
//   // },
//   // shoppings: {
//   //   expectedData: [130, 140, 141, 142, 145, 150, 160],
//   //   actualData: [120, 82, 91, 154, 162, 140, 130]
//   // }
// }

export default {
  name: 'Home',
  components: {
    PanelGroup,
    LineChart,
    // RaddarChart,
    // PieChart,
    // BarChart
  },
  data() {
    return {
      // 定时器
      timer: null,
      lineChartData: [],
      xAxis: [],
      // 完成金额
      completeAmount: 0,
      // 完成比例
      completeRatio: 0,
      // 总金额
      totalSaleAmount: 0,
      // 未完成金额
      unAmount: 0,
      // 未完成比例
      unCompleteRatio: 0,
      // 财年文字
      text: "",
      // 项目收集
      projectCollectByYear: 0,
      // 销售机会
      saleChanceByYear: 0,
      // 市场活动
      marketActivityByYear: 0,
      // 拜访记录
      visitNumByYear: 0,
    }
  },
  activated() {
    this.getData()
    // this.timer && clearInterval(this.timer)
    // this.timer = setInterval(() => {
    // this.getData()
    // }, 3000)
  },
  created() {
    this.getData()
    // this.timer && clearInterval(this.timer)
    // this.timer = setInterval(() => {
    // this.getData()
    // }, 3000)
  },
  // deactivated() {
  //   this.timer && clearInterval(this.timer)
  // },
  methods: {
    handleSetLineChartData(type) {
      // this.lineChartData = lineChartData[type]
    },
    // 获取数据
    async getData() {
      const {code, data} = await getDataApi()
      if (code === 200) {
        // data.content && this.$message.error(data.content)
        /*
        * ['项目收集', '销售跟单', '销售机会', '客户拜访', '市场活动', '周报']
        * marketActivityList市场活动
        * projectCollectList项目收集
        * saleChanceList销售机会
        * salesMerchandiserList销售跟单
        * visitNumList拜访记录
        * weeklyReportList周报
        * */
        this.lineChartData = [
          data?.projectCollectList?.count ?? 0,
          data?.salesMerchandiserList?.count ?? 0,
          data?.saleChanceList?.count ?? 0,
          data?.visitNumList?.count ?? 0,
          data?.marketActivityList?.count ?? 0,
          data?.weeklyReportList?.count ?? 0,
        ]

        this.completeAmount = data?.completeAmount ?? 0
        this.completeRatio = data?.completeRatio ?? 0
        this.totalSaleAmount = data?.totalSaleAmount ?? 0
        this.unAmount = data?.unAmount ?? 0
        this.unCompleteRatio = data?.unCompleteRatio ?? 0
        this.text = data?.text ?? ""
        this.projectCollectByYear = data?.projectCollectByYear ?? 0
        this.saleChanceByYear = data?.saleChanceByYear ?? 0
        this.marketActivityByYear = data?.marketActivityByYear ?? 0
        this.visitNumByYear = data?.visitNumByYear ?? 0
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor {
  box-sizing: border-box;
  height: calc(100vh - 84px);
  padding: 18px 32px;
  //padding-bottom: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  overflow: auto;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

@media (max-width:550px) {
  .dashboard-editor {
    padding: 18px 16px;
  }
}
</style>
